<template>
	<el-container class="page-user">
		<el-aside style="width: 240px;">
			<el-container>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
								<el-icon v-if="item.icon">
									<component :is="item.icon" />
								</el-icon>
								<template #title>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<Suspense>
				<template #default>
					<component :is="page" :info="user" />
				</template>
				<template #fallback>
					<el-skeleton :rows="3" />
				</template>
			</Suspense>
		</el-main>
	</el-container>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
	name: 'userCenter',
	components: {
		basic: defineAsyncComponent(() => import('./info/basic')),
		stock: defineAsyncComponent(() => import('./info/stock')),
		rate: defineAsyncComponent(() => import('./info/rate')),
		taxpayer: defineAsyncComponent(() => import('./info/taxpayer')),
		inout: defineAsyncComponent(() => import('./info/inout')),
		check: defineAsyncComponent(() => import('./info/check')),
	},
	data() {
		return {
			menu: [
				{
					list: [
						{
							title: "基础参数",
							component: "basic",
							icon: "el-icon-postcard",
						},
						{
							title: "库存参数",
							component: "stock",
							icon: "el-icon-postcard",
						},
						{
							title: "税率",
							component: "rate",
							icon: "el-icon-postcard",
						},
						{
							title: "纳税人设置",
							component: "taxpayer",
							icon: "el-icon-postcard",
						},
						{
							title: "出入库设置",
							component: "inout",
							icon: "el-icon-postcard",
						},
						{
							title: "审核设置",
							component: "check",
							icon: "el-icon-postcard",
						},
					]
				},
			],
			user: {
				stock: '',
				name: "",
				role_name: "",
				avatar: "",
				sex: 0,
				about: "",
				multipoint_login: 0
			},
			page: "basic"
		}
	},
	//路由跳转进来 判断from是否有特殊标识做特殊处理
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			if (from.is) {
				//删除特殊标识，防止标签刷新重复执行
				delete from.is
				//执行特殊方法
				vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
					type: 'success',
					center: true
				}).then(() => { }).catch(() => { })
			}
		})
	},
	created() {
		this.getAdminInfo()
	},
	methods: {
		openPage(item) {
			this.page = item.index
		},
		async getAdminInfo() {
			var res = await this.$API.admin.user.info.get();
			if (res.code == 1) {
				this.user = res.data.user
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
	},
}
</script>
